import React, { Component } from 'react'
import Tab from './components/Tab'
import TabContent from './components/TabContent'
import './App.css'
const { list } = require('./Mock')
// const list = [
//   {
//     id: 1,
//     title: '动漫',
//     children: [
//       {
//         cId: 11,
//         title: 'JOJO',
//       },
//       {
//         cId: 22,
//         title: '一人之下',
//       },
//       {
//         cId: 33,
//         title: '日月神娃',
//       },
//     ],
//   },
//   {
//     id: 2,
//     title: '电视',
//     children: [
//       {
//         cId: 55,
//         title: '狂飙',
//       },
//       {
//         cId: 212,
//         title: '青苹果乐园',
//       },
//       {
//         cId: 363,
//         title: '西游记',
//       },
//     ],
//   },
//   {
//     id: 3,
//     title: '音乐',
//     children: [
//       {
//         cId: 556,
//         title: '只因你太美',
//       },
//       {
//         cId: 2192,
//         title: '爱情买卖',
//       },
//       {
//         cId: 3630,
//         title: '爱如火',
//       },
//     ],
//   },
// ]
export default class App extends Component {
  constructor() {
    super()
    this.state = {
      activeId: list[0].id,
    }
  }
  changFatherState = (activeId) => {
    this.setState({ activeId })
  }
  render() {
    console.log(list, 'renderList')
    return (
      <div>
        {/* 给子组件传参数 */}
        <Tab
          list={list}
          activeId={this.state.activeId}
          changFatherState={this.changFatherState}></Tab>
        <TabContent list={list} activeId={this.state.activeId}></TabContent>
      </div>
    )
  }
}
